<template>
  <form report-submit @submit.stop="onTap" style="width: 100%;height: 100%;">
    <button :class="[className]" formType="submit" :loading="loading" :style="[sty]">
      <slot></slot>
    </button>
  </form>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
const NODE_ENV = process.env.NODE_ENV

export default {
  props: {
    cls: [String],
    sty: [String],
    disabled: [Boolean],
    loading: [Boolean],
    slotData: [Object],
  },
  computed: {
    className () {
      if (this.disabled) return this.cls + ' disabled'
      return this.cls
    }
  },
  methods: {
    ...mapActions('notification', ['enqueue']),
    onTap (e) {
      if (this.disabled) return
      if (NODE_ENV === 'production') {
        this.enqueue(e.target.formId)
      }
      this.$emit('hit')
    }
  }
}
</script>

<style scoped lang="less">
form {
  box-sizing: border-box;
  display: block;
  height: 100%;
  width: 100%;
}
</style>
